<template>
  <div class="all">
  <div id="fill">
    <div class="title">{{title}}</div>
    <div class="description">{{description}}</div>
    <div v-for="(question, index) in questions">
      <sign-radio-fill
          v-if="question.isShow && question.type === 'radio' && question.qtype==='sign'"
          :no="getno(index)"
          :question="question"
          :radio="getRadio(question)">
      </sign-radio-fill>
      <radio 
          v-else-if=" question.isShow && question.type === 'radio'"
          :no="getno(index)"
          :question="question"
          :radio="getRadio(question)">
      </radio>

      <sign-checkbox-fill
          v-if="question.isShow && question.type === 'checkbox' && question.qtype==='sign'"
        :no="getno(index)"
        :question="question"
        :checkList="getCheckBox(question)">
      </sign-checkbox-fill>
      <check-box 
        v-else-if="question.isShow && question.type === 'checkbox'"
        :no="getno(index)"
        :question="question"
        :checkList="getCheckBox(question)">
      </check-box>

      <completion
      v-if="question.isShow && question.type == 'completion'"
      :no="getno(index)"
      :question="question"
      :input="getInput(question)"
      >
      </completion>

      <star
      v-if="question.isShow && question.type == 'score'"
      :no="getno(index)"
      :question="question"
      :max="question.options.length-1"
      >
      </star>
    </div>
    <div class="button"><el-button type="primary" plain @click="submit">提交</el-button></div>
  </div>
  </div>
</template>

<script>
import Radio from '../question/Radio.vue'
import SignRadioFill from "@/fill/sign/question/SignRadioFill";
import CheckBox from '../question/CheckBox.vue'
import SignCheckboxFill from "@/fill/sign/question/SignCheckboxFill";
import Completion from '../question/Completion.vue'
import Star from '../question/Star.vue'
import axios from "axios"
import qs from "qs"
import { h } from 'vue';
import {initQRelation} from "@/fill/relation";

export default {
  name:'PreSight',
  components: {
    Radio,
    CheckBox,
    Completion,
    Star,
    SignRadioFill,
    SignCheckboxFill
  },
  data(){
   return {
     title: '题目',
     description: '',
     isAutoLabel: true,
     isSubmitted: false,
     questions: [
       {
         id: 1,
         title:'test',
         isNecessary: true,
         type: 'radio',
         options: [
           {
             id:1,
             text: '123',
             description: '123',
            isDefault:false,
           }
         ]
       },
     ]
   }
  },
  created: function (){
    this.getQuestionnaireData()
    if (location.href.indexOf("#reloaded") === -1) {
      location.href = location.href + "#reloaded";
      location.reload();
    }
  },
  methods: {
    getno(index) {
      if(!this.isAutoLabel) {
        return 0
      }else{  
        return index+1
      }
    },

    getdata(res) {
      return res.data.data
    },

    getRadio(question) {
      if(question.optionId != null) {
        return question.optionId
      }
      question.options.forEach(option => {
        if(option.isDefault) {
          question.optionId = option.id
          return question.optionId
        }
      });
    },

    getCheckBox(question) {
      
      if(question.optionIds != null) {
        
        return question.optionIds
      }
      question.optionIds = []
      question.options.forEach(option => {
        if(option.isDefault) {
          question.optionIds.push(option.id)
        }
      });
      return question.optionIds
    },

    getInput(question) {
      if(question.content != null) {
        return question.content
      }else{
        return ''
      }
    },

    getQuestionnaireData() {
      let data = {
        id: localStorage.getItem('id'),
        questionnaireId: this.questionnaireId
      }
      axios.post('/api/edit/getQuestionnaire',qs.stringify(data)).then(res => {
        console.log(res.data.data);
        if(res.data.code === 0) {

//TODO  初始化关联关系
          if(res.data.data.relations!=null){
            let caller = res.data.data.relations.caller;
            let relationMap = res.data.data.relations.relationMap;
            let questions = res.data.data.questions;
            if(Object.keys(caller).length>0){
              initQRelation(res.data.data.questions,relationMap);
              //计算关联
              if(questions.length!==0){
                let question = questions[0];
                question.isShow=true;
                questions.forEach(question=>{
                  question.answer = [];
                  if(question.type==="radio"||question.type==="checkbox")
                    question.options.forEach(option=>{
                      if(option.isDefault===true){
                        question.answer.push(option.id);
                      }
                    });
                  if(question.isShow){
                    question.call();
                  }
                })
              }
            }
          }

          this.title = this.getdata(res)['title']
          this.description = this.getdata(res)['description']
          this.isAutoLabel = this.getdata(res)['isAutoLabel']
          this.questions = this.getdata(res)['questions']
        }else {
          console.log(res)
        }
      })
    },
    
    sight() {
      this.$notify({
        title: '警告',
        message: h('i', { style: 'color: teal'}, '预览模式不可提交')
      });
    },

    submit() {
      this.sight()
    }
  },
  computed:{
    questionnaireId(){
      return parseInt(this.$route.query.questionnaireId)
    },
  }
}
</script>

<style scoped src='assets/css/fillcss/fill.css'>
  /* @import url('./css/preSight.css'); */
</style>
